﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>chart demo</title>
        <link href="../qschart/mstar_qs_chart_1.3.css" type="text/css" rel="stylesheet"/>
        <link href="../css/qs.css" type="text/css" rel="stylesheet"/>
        <link href="../css/ui/button.css" type="text/css" rel="stylesheet"/>
        <link href="../css/ui/input.css" type="text/css" rel="stylesheet"/>
        <link href="../theme/default/style.css" type="text/css" rel="stylesheet"/>
        <!--<link href="../css/qs_ui.css" type="text/css" rel="stylesheet"/>
        <link href="../css/qs_chart.css" type="text/css" rel="stylesheet"/>-->
        <style>
            body {
                font-size: 11px;
                font-family: tahoma;
            }
            
            .qs_by_wrap {
                margin: 0 auto;
                width: 1080px;
            }
            .qs_by_wrap .qs-r{
            	margin-top:5px;
            }
            .qs-ui-btn.go {
                height: 18px;
                width: auto;
                font-size: 100%;
            }
            
            .qs-ui-ipt {
                width: 40px;
            }
            
            .ctrtable td {
                border-right: 1px solid #999999;
                border-bottom: 1px solid #999999;
                padding: 2px 10px;
            }
            
            .qs-hd {
                height: 30px;
				margin-top:15px;
                font-weight: bolder;
                border-bottom: 1px solid #666;
            }
			.qs-hd span{
				  color: #006596;
                  font-size: 18px;
			}
            .h-left{
            	position: relative;
				float:left
            }
			.h-right{
				position: relative;
				width: 465px;
				height:320px;
				float:left;
				background-color:#f1f1f1;
				margin-left:10px;
			}
            .b-left {
                width: 600px;
                height: 450px;
                background-color: #f5f5f5;
                border: 1px solid #bbbbbb;
                float: left;
                overflow: auto;
				margin-top:5px;
            }
            
            .b-right {
                width: 465px;
                height: 450px;
                background-color: #f5f5f5;
                border: 1px solid #bbbbbb;
                float: left;
                margin-left: 10px;
				margin-top:5px;
            }
            .b-ctrl{
            	border-top: 1px solid #666;
            }
            ul li {
                padding-left: 5px;
                height: 30px;
            }
            
            .ullihover {
                background-color: #EBEBEB;
            }
            
            .title {
                background-color: #ccc;
                font-weight: bold;
                padding: 3px;
                padding-left: 8px;
                margin-left: -15px;
                margin-top: 12px;
                margin-bottom: 2px;
                clear: both;
            }
            
            .title0 {
                margin-top: 0px;
            }
            
            .handle {
                padding-left: 15px;
                line-height: 20px;
            }
            
            .args {
                margin-left: 20px;
            }
            
            .args .args-name {
                text-decoration: underline;
                width: 50px;
                float: left;
            }
            
            .args .args-desc {
                float: left;
            }
            
            select {
                border: 1px solid #ccc;
            }
            
            .li-title {
                height: 16px;
                font-weight: bold;
                background-color: #ccc;
                padding: 4px;
            }
            
            .span-title {
                font-weight: bold;
                width: 120px;
                display: -moz-inline-box;
                display: inline-block;
                margin-left: 10px;
                color: #515151;
            }
        </style>
        <script src="../lib/jquery.js" type="text/javascript">
        </script>
        <script src="../lib/jquery.json.min.js" type="text/javascript">
        </script>
        <script src="../lib/migratory-jslib.js" type="text/javascript">
        </script>
        <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]--><!--<script src="../qschart/mstar_qs_chart_1.2.js" type="text/javascript"></script>--><!--<script src="../js/ui/util.js" type="text/javascript">
        </script>
        <script src="../js/ui/scrollpanel.js" type="text/javascript">
        </script>
        <script src="../js/ui/tabmenu.js" type="text/javascript">
        </script>
        <script src="../js/ui/scrollpanel.js" type="text/javascript">
        </script>
        <script src="../js/com/autoCompleteBox.js" type="text/javascript">
        </script>
        <script src="../js/sys/DFmt.us.js" type="text/javascript">
        </script>
        <script src="../js/com/chartDraw.js" type="text/javascript">
        </script>
        <script src="../js/com/chartUtil.js" type="text/javascript">
        </script>
        <script src="../js/com/indicatorCalculation.js" type="text/javascript">
        </script>
        <script src="../js/com/chartDataManager.js" type="text/javascript">
        </script>
        <script src="../js/com/baseChart.js" type="text/javascript">
        </script>
        <script src="../js/com/stockChart.js" type="text/javascript">
        </script>
        <script src="../lib/mstar.flot.js" type="text/javascript">
        </script>-->
        <script src="../qschart/mstar_qs_chart_1.3.js" type="text/javascript">
        </script>
    </head>
    <body style="overflow: auto; padding: 0; margin: 0">
        <div class="qs-gd qs_by_wrap">
            <div class="qs-hd">
                <span>QuoteSpeed Chart APIs for Stock, ETF and Close-End Fund.</span>
            </div>
            <div class="qs-bd">
                <div class="qs-r">

                        <div id="chart" style="position: relative;float:left">
                        </div>
                        <div id="init" class="h-right">
                            <pre>
-------------chart initial code-----------------
var culture = "en-US",region = "USA",mainTicker = "XNYS:IBM";
var sw = 955, sh =356,statusConfig = { width: 600, height: 320 };
var uiconfig = {pCtrl1:null,
        pCtrl2:null, vCtrl:null,
        Chart:{showPChart:true,showVChart:true,
		showLegend:true,showTimeSlider:true},
        RightMenu:false,CustomUI:false,
		chartCtrl:"default",settingPanel:null,
		autoHeight:true,MouseWheel:true,
		ZoomIn:true
    };
var dataUrl = GB_ChartDataManager.dataUrls;
dataUrl.intraday ="../quote.jsp?";
dataUrl.historical ="../getStockHistoricalData.jsp?";
dataUrl.fundamental ="../getFundamentalData.jsp?";
dataUrl.minutelyIntraday ="../getMinutelyIntradayData.jsp?";
dataUrl.fundHistorical = "../getFundChartData.jsp?";
var ch1=new RTChartComponent(mainTicker, region, culture );
ch1.setLoginUrl(reloginUrl);
ch1.initUIConfig(uiconfig);  // user default ui configure.
ch1.Init("chart","ch1",statusConfig);	
</pre>
                        </div>

                </div>
                <div class="qs-r b-ctrl">
                    <div class="b-left">
                        <ul class="ctrl">
                            <li class='li-title'>
                                Display
                            </li>
                            <li idx='1'>
                                <span class='span-title'>Chart Type:</span>
                                <select id="chartType">
                                    <option value='line'>Line</option>
                                    <option value='mountain'>Mountain</option>
                                    <option value='dot'>Dot</option>
                                    <option value='ab'>Above/Below</option>
                                    <option value='ohlc'>OHLC</option>
                                    <option value='hlc'>HLC</option>
                                    <option value='candle'>Candlestick</option>
                                    <option value='growth'>% Growth</option>
                                    <option value='growth10'>10k Growth</option>
                                    <option value='dEffect'>Divdend Effect</option>
                                </select>
                                <input type="button" value="Set Chart Type" onclick="setChartType()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='2'>
                                <span class='span-title'>Vertical Scale</span>
                                <select id="chartScale">
                                    <option value='0'>liner</option>
                                    <option value='1'>logarithmic</option>
                                </select>
                                <input type="button" value="Set Chart Type" onclick="setVerticalScale()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='3'>
                                <span class='span-title'>Compair Tickers:</span>
                                <input type="text" id="compairTxt" class="qs-ui-ipt"/>
								<input type="button" value="Add" onclick="addCompairTicker()" class="qs-ui-btn go"/>
								<input id="select-compair" type="text"class="qs-ui-ipt"/>
								<input type="button" value="Remove Compair Ticker" onclick="removeCompairTicker()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='4'>
                                <span class='span-title'>Cursor Type:</span>
                                <input type="text" id="csType" class="qs-ui-ipt"/>
								<input type="button" value="Set Cursor Type" onclick="setCursorType()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='5'>
                                <span class='span-title'>Zoom:</span>
                                <select id="zoomType" onchange="changeZoomType()">
                                    <option value="-1">select a zoom type</option>
                                    <option value="1">1 Day</option>
                                    <option value="0">3 Days</option>
                                    <option value="2">5 Days</option>
                                    <option value="3">1 Month</option>
                                    <option value="4">3 Months</option>
                                    <option value="5">YTD</option>
                                    <option value="6">1 Year</option>
                                    <option value="7">3 Years</option>
                                    <option value="8">5 Years</option>
                                    <option value="9">10 Years</option>
                                    <option value="10">Maximum</option>
                                </select>&nbsp;
                            </li>
                            <li idx='49'>
                                <span class='span-title'>Set Selection Mode:</span>
                                <input type="text" id="setSelectionMode" class="qs-ui-ipt"/><input type="button" value="Set Selection Mode" onclick="setSelectionMode()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='50'>
                                <span class='span-title'>Reset Zoom:</span>
                                <input type="button" value="Reset Zoom" onclick="resetZoom()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='6'>
                                <span class='span-title'>Customize Range:</span>
                                <input type="text" id="startBox" class="qs-ui-ipt"/>--<input type="text" id="endBox" class="qs-ui-ipt"/><input type="button" value="Customize Range of Date " onclick="changeDateRange()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='7'>
                                <span class='span-title'>Frequency:</span>
                                <input type="text" id="fre" class="qs-ui-ipt"/><input type="button" value="Set Frequency" onclick="setFrequency()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='48'>
                                <span class='span-title'>Switch IIV Line:</span>
                                <input type="text" id="switchIIV" class="qs-ui-ipt"/>
								<input type="button" value="Switch IIV Line" onclick="switchIIV()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='8'>
                                <span class='span-title'>Switch Volume Chart:</span>
                                <input type="text" id="switchVol" class="qs-ui-ipt"/>
								<input type="button" value="Switch Volume Chart" onclick="switchVolumeChart()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='9'>
                                <span class='span-title'>Switch Earnings:</span>
                                <input type="text" id="earnings" class="qs-ui-ipt"/>
								<input type="button" value="Switch Earnings" onclick="switchEarnings()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='10'>
                                <span class='span-title'>Switch Dividend:</span>
                                <input type="text" id="dividend" class="qs-ui-ipt"/>
								<input type="button" value="Switch Dividend" onclick="switchDividend()" class="qs-ui-btn go"/>
                            </li>
                            <li idx='11'>
                                <span class='span-title'>Switch Splits:</span>
                                <input type="text" id="splits" class="qs-ui-ipt"/>
								<input type="button" value="Switch Splits" onclick="switchSplits()" class="qs-ui-btn go"/>
                            </li>
                            <li class="li-title">
                                Drawing and note
                            </li>
                            <li idx='38'>
                                <span class="span-title">Trend line</span>
                                <input type="button" value="Add a trend line" onclick="javascript:ch1.beginDrawing('trendline')" class="qs-ui-btn go"/>
								<input type="button" value="Cancel add trend line" onclick="javascript:ch1.cancelDrawing('trendline')" class="qs-ui-btn go"/>
                            </li>
                            <li idx='39'>
                                <span class='span-title'>Rectangle</span>
                                <input type="button" value="Add a Rectangle" onclick="javascript:ch1.beginDrawing('rectangle')" class="qs-ui-btn go"/>
								<input type="button" value="Cancel add rectangle" onclick="javascript:ch1.cancelDrawing('rectangle')" class="qs-ui-btn go"/>
                            </li>
                            <li idx='40'>
                                <span class='span-title'>Ellipse</span>
                                <input type="button" value="Add a Ellipse" onclick="javascript:ch1.beginDrawing('ellipse')" class="qs-ui-btn go"/>
								<input type="button" value="Cancel add ellipse " onclick="javascript:ch1.cancelDrawing('ellipse')" class="qs-ui-btn go"/>
                            </li>
                            <li idx='52'>
                                <span class='span-title'>Level Line</span>
                                <input type="button" value="Add a level line" onclick="javascript:ch1.beginDrawing('levelline')" class="qs-ui-btn go"/>
								<input type="button" value="Cancel add level line" onclick="javascript:ch1.cancelDrawing('levelline')" class="qs-ui-btn go"/>
                            </li>
                            <li idx='53'>
                                <span class='span-title'>Fibonacci Retracement Levels</span>
                                <input type="button" value="Add a FR Levels" onclick="javascript:ch1.beginDrawing('fibonacci')" class="qs-ui-btn go"/>
								<input type="button" value="Cancel add FR Levels" onclick="javascript:ch1.cancelDrawing('fibonacci')" class="qs-ui-btn go"/>
                            </li>
                            <li idx='41'>
                                <span class='span-title'>Note</span>
                                <input type="button" value="Add a Note" onclick="javascript:ch1.beginDrawing('note')" class="qs-ui-btn go"/>
								<input type="button" value="Cancel add note" onclick="javascript:ch1.cancelDrawing('note')" class="qs-ui-btn go"/>
                            </li>
                            <li class='li-title'>
                                Indicators
                            </li>
                            <li idx='12'>
                                <span class='span-title'>SMA</span>Period of line1:<input type="text" id="sma1" class="qs-ui-ipt"/> 
								line2:<input type="text" id="sma2" class="qs-ui-ipt"/>
								line3:<input type="text" id="sma3" class="qs-ui-ipt"/>
								<input type="button" value="Add SMA" onclick="javascript:ch1.addIndicators('SMA',document.getElementById('sma1').value,document.getElementById('sma2').value,document.getElementById('sma3').value);" class="qs-ui-btn go" />SMA:<input type="text" id="rsma1" class="qs-ui-ipt"/><input type="button" value="Remove SMA" onclick="javascript:ch1.removeIndicators('SMA',document.getElementById('rsma1').value);" class="qs-ui-btn go"/>
                            </li>
                            <li idx='13'>
                                <span class='span-title'>Volume SMA</span>Period:<input type="text" id="smaV" class="qs-ui-ipt"/><input type="button" value="add Volume SMA" onclick="javascript:ch1.addIndicators('SMAV',document.getElementById('smaV').value);" class="qs-ui-btn go"/><input type="button" value="remove Volume SMA" onclick="javascript:ch1.removeIndicators('SMAV');" class="qs-ui-btn go"/>
                            </li>
                            <li idx='14'>
                                <span class='span-title'>EMA</span>Period of line1:<input type="text" id="ema1" class="qs-ui-ipt"/> line2:
								<input type="text" id="ema2" class="qs-ui-ipt"/> line3:<input type="text" id="ema3" class="qs-ui-ipt"/>
								<input type="button" value="add EMA" onclick="javascript:ch1.addIndicators('EMA',document.getElementById('ema1').value,document.getElementById('ema2').value,document.getElementById('ema3').value);" class="qs-ui-btn go"/>Period of EMA:<input type="text" id="rema1" class="qs-ui-ipt"/>
								<input type="button" value="remove" onclick="javascript:ch1.removeIndicators('EMA',document.getElementById('rema1').value);" class="qs-ui-btn go"/>
                            </li>
                            <li idx='51'>
                                <span class='span-title'>WMA</span>Period:<input type="text" id="wma" class="qs-ui-ipt"/><input type="button" value="add WMA" onclick="javascript:ch1.addIndicators('WMA',document.getElementById('wma').value);" class="qs-ui-btn go"/><input type="button" value="remove WMA" onclick="javascript:ch1.removeIndicators('WMA');" class="qs-ui-btn go"/>
                            </li>
                            <li idx='15'>
                                <span class='span-title'>BBands</span>Period:<input type="text" id="bbandsP" class="qs-ui-ipt"/> Deviation:<input type="text" id="bbandsD" class="qs-ui-ipt"/><input type="button" value="add BBands" onclick="javascript:ch1.addIndicators('BBands',document.getElementById('bbandsP').value,document.getElementById('bbandsD').value);" class="qs-ui-btn go"/><input type="button" value="remove BBands" onclick="javascript:ch1.removeIndicators('BBands');" class="qs-ui-btn go"/>
                            </li>
                            <li idx='16'>
                            <span class='span-title'>PSAR</span>step:<input type="text" id="psarStep" class="qs-ui-ipt"/> max of steps:<input type="text" id="psarMStep" class="qs-ui-ipt" /><input type="button" value="add PSAR" onclick="javascript:ch1.addIndicators('PSAR',document.getElementById('psarStep').value,document.getElementById('psarMStep').value);" class="qs-ui-btn go"/>
                            </td>
                            <td>
                            <input type="button" value="remove PSAR" onclick="javascript:ch1.removeIndicators('PSAR');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='17'>
                            <span class='span-title'>MACD</span>Slow Period:<input type="text" id="macdP1" class="qs-ui-ipt"/> fast Period:<input type="text" id="macdP2" class="qs-ui-ipt"/> signal Period:<input type="text" id="macdP3" class="qs-ui-ipt"/><input type="button" value="add MACD" onclick="javascript:ch1.addIndicators('MACD',document.getElementById('macdP1').value,document.getElementById('macdP2').value,document.getElementById('macdP3').value);" class="qs-ui-btn go"/><input type="button" value="remove MACD" onclick="javascript:ch1.removeIndicators('MACD');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='18'>
                            <span class='span-title'>ROC</span>Period:<input type="text" id="rocP" class="qs-ui-ipt"/><input type="button" value="add ROC" onclick="javascript:ch1.addIndicators('ROC',document.getElementById('rocP').value);" class="qs-ui-btn go"/><input type="button" value="remove ROC" onclick="javascript:ch1.removeIndicators('ROC');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='19'>
                            <span class='span-title'>RSI</span>
                            Period:<input type="text" id="rsiP" class="qs-ui-ipt"/><input type="button" value="add RSI" onclick="javascript:ch1.addIndicators('RSI',document.getElementById('rsiP').value);" class="qs-ui-btn go"/><input type="button" value="remove RSI" onclick="javascript:ch1.removeIndicators('RSI');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='20'>
                            <span class='span-title'>Williams</span>Period:<input type="text" id="willRP" class="qs-ui-ipt"/><input type="button" value="add Williams" onclick="javascript:ch1.addIndicators('WillR',document.getElementById('willRP').value);" class="qs-ui-btn go"/><input type="button" value="remove Williams" onclick="javascript:ch1.removeIndicators('WillR');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='21'>
                            <span class='span-title'>Slow Stochastic</span>D% Period:<input type="text" id="sStochasticd" class="qs-ui-ipt"/> K% Period:<input type="text" id="sStochastick" class="qs-ui-ipt"/><input type="button" value="add Slow Stochastic" onclick="javascript:ch1.addIndicators('SStochastic',document.getElementById('sStochasticd').value,document.getElementById('sStochastick').value);" class="qs-ui-btn go"/><input type="button" value="remove Slow Stochastic" onclick="javascript:ch1.removeIndicators('SStochastic');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='22'>
                            <span class='span-title'>Fast Stochastic</span>D% Period:<input type="text" id="fStochasticd" class="qs-ui-ipt"/> K% Period:<input type="text" id="fStochastick" class="qs-ui-ipt"/><input type="button" value="add Fast Stochastic" onclick="javascript:ch1.addIndicators('FStochastic',document.getElementById('fStochasticd').value,document.getElementById('fStochastick').value);" class="qs-ui-btn go"/><input type="button" value="remove Fast Stochastic" onclick="javascript:ch1.removeIndicators('FStochastic');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='42'>
                            <span class='span-title'>VPlus</span>
                            <input type="button" value="Add VPlus" onclick="javascript:ch1.addIndicators('VPlus');" class="qs-ui-btn go"/><input type="button" value="remove VPlus" onclick="javascript:ch1.removeIndicators('VPlus');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='43'>
                            <span class='span-title'>Volume</span>
                            <input type="button" value="Add Volume" onclick="javascript:ch1.addIndicators('Volume');" class="qs-ui-btn go"/><input type="button" value="remove Volume" onclick="javascript:ch1.removeIndicators('Volume');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='32'>
                            <span class='span-title'>VBP</span>
                            <input type="button" value="Add VBP" onclick="javascript:ch1.addIndicators('VBP');" class="qs-ui-btn go"/><input type="button" value="remove VBP" onclick="javascript:ch1.removeIndicators('VBP');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='31'>
                            <span class='span-title'>UDRatio</span>
                            Period:<input type="text" id="udrp" class="qs-ui-ipt"/>Smoothing:<input type="text" id="udrs" class="qs-ui-ipt"/><input type="button" value="Add UDRatio" onclick="javascript:ch1.addIndicators('UDRatio',document.getElementById('udrp').value,document.getElementById('udrs').value);" class="qs-ui-btn go"/><input type="button" value="remove UDRatio" onclick="javascript:ch1.removeIndicators('UDRatio');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='30'>
                            <span class='span-title'>VAcc</span>
                            <input type="button" value="Add VAcc" onclick="javascript:ch1.addIndicators('VAcc');" class="qs-ui-btn go"/><input type="button" value="remove VAcc" onclick="javascript:ch1.removeIndicators('VAcc');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='29'>
                            <span class='span-title'>OBV</span>
                            <input type="button" value="Add OBV" onclick="javascript:ch1.addIndicators('OBV');" class="qs-ui-btn go"/><input type="button" value="remove OBV" onclick="javascript:ch1.removeIndicators('OBV');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='28'>
                            <span class='span-title'>MFI</span>
                            Period:<input type="text" id="msfp" class="qs-ui-ipt"/><input type="button" value="Add MFI" onclick="javascript:ch1.addIndicators('MFI',document.getElementById('msfp').value);" class="qs-ui-btn go"/><input type="button" value="remove MFI" onclick="javascript:ch1.removeIndicators('MFI');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='27'>
                            <span class='span-title'>DMI</span>
                            <input type="button" value="Add DMI" onclick="javascript:ch1.addIndicators('DMI');" class="qs-ui-btn go"/><input type="button" value="remove DMI" onclick="javascript:ch1.removeIndicators('DMI');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='26'>
                            <span class='span-title'>ULT</span>
                            <input type="button" value="Add ULT" onclick="javascript:ch1.addIndicators('ULT');" class="qs-ui-btn go"/><input type="button" value="remove ULT" onclick="javascript:ch1.removeIndicators('ULT');" class="qs-ui-btn go"/>
                        </li>
                        <li idx='25'>
                            <span class='span-title'>Momentum</span>
                            Period:<input type="text" id="momp" class="qs-ui-ipt"/><input type="button" value="Add Momentum" onclick="javascript:ch1.addIndicators('Momentum',document.getElementById('momp').value);" class="qs-ui-btn go"/><input type="button" value="remove Momentum" onclick="javascript:ch1.removeIndicators('Momentum');" class="qs-ui-btn go"/>
                        </li>
                        </li>
                        <li idx='24'>
                            <span class='span-title'>MAE</span>
                            Period:<input type="text" id="maep" class="qs-ui-ipt"/>Band Width:<input type="text" id="maebw" class="qs-ui-ipt"/><input type="button" value="Add MAE" onclick="javascript:ch1.addIndicators('MAE',document.getElementById('maep').value,document.getElementById('maebw').value);" class="qs-ui-btn go"/><input type="button" value="remove MAE" onclick="javascript:ch1.removeIndicators('MAE');" class="qs-ui-btn go"/>
                        </li>
                    </li>
                    <li idx='23'>
                        <span class='span-title'>PChannel</span>
                        Period:<input type="text" id="pchp" class="qs-ui-ipt"/><input type="button" value="Add PChannel" onclick="javascript:ch1.addIndicators('PChannel',document.getElementById('pchp').value);" class="qs-ui-btn go"/><input type="button" value="remove PChannel" onclick="javascript:ch1.removeIndicators('PChannel');" class="qs-ui-btn go"/>
                    </li>
                    </li>
                    <li class='li-title'>
                        Fundamental
                    </li>
                    <li idx='33'>
                        <span class='span-title'>PE</span>
                        <input type="button" value="Add PE" onclick="javascript:ch1.addValuations('PE');" class="qs-ui-btn go"/><input type="button" value="remove PE" onclick="javascript:ch1.removeValuations('PE');" class="qs-ui-btn go"/>
                    </li>
                    <li idx='35'>
                        <span class='span-title'>PS</span>
                        <input type="button" value="Add PS" onclick="javascript:ch1.addValuations('PS');" class="qs-ui-btn go"/><input type="button" value="remove PS" onclick="javascript:ch1.removeValuations('PS');" class="qs-ui-btn go"/>
                    </li>
                    <li idx='34'>
                        <span class='span-title'>PB</span>
                        <input type="button" value="Add PB" onclick="javascript:ch1.addValuations('PB');" class="qs-ui-btn go"/><input type="button" value="remove PB" onclick="javascript:ch1.removeValuations('PB');" class="qs-ui-btn go"/>
                    </li>
                    <li idx='36'>
                        <span class='span-title'>PC</span>
                        <input type="button" value="Add PC" onclick="javascript:ch1.addValuations('PC');" class="qs-ui-btn go"/><input type="button" value="remove PC" onclick="javascript:ch1.removeValuations('PC');" class="qs-ui-btn go"/>
                    </li>
                    <li idx='37'>
                        <span class='span-title'>FairValue</span>
                        <input type="button" value="Add FairValue" onclick="javascript:ch1.addValuations('FairValue');" class="qs-ui-btn go"/><input type="button" value="remove FairValue" onclick="javascript:ch1.removeValuations('FairValue');" class="qs-ui-btn go"/>
                    </li>
                    <li idx='44'>
                        <span class='span-title'>RDividend</span>
                        <input type="button" value="Add RDividend" onclick="javascript:ch1.addValuations('RDividend');" class="qs-ui-btn go"/><input type="button" value="remove RDividend" onclick="javascript:ch1.removeValuations('RDividend');" class="qs-ui-btn go"/>
                    </li>
                    <li idx='45'>
                        <span class='span-title'>DYield</span>
                        <input type="button" value="Add DYield" onclick="javascript:ch1.addValuations('DYield');" class="qs-ui-btn go"/><input type="button" value="remove DYield" onclick="javascript:ch1.removeValuations('DYield');" class="qs-ui-btn go"/>
                    </li>
                    <li idx='46'>
                        <span class='span-title'>REPS</span>
                        <input type="button" value="Add REPS" onclick="javascript:ch1.addValuations('REPS');" class="qs-ui-btn go"/><input type="button" value="remove REPS" onclick="javascript:ch1.removeValuations('REPS');" class="qs-ui-btn go"/>
                    </li>
                    <li idx='47'>
                        <span class='span-title'>SInterest</span>
                        <input type="button" value="Add SInterest" onclick="javascript:ch1.addValuations('SInterest');" class="qs-ui-btn go"/><input type="button" value="remove SInterest" onclick="javascript:ch1.removeValuations('SInterest');" class="qs-ui-btn go"/>
                    </li>
                    <li idx=''>
                        <span class='span-title'></span>
                    </li>
                </ul>
            </div>
            <div id="desc" class="b-right">
            </div>
        </div>
        </div>
        <script>
            var debug = true; /// it will get data api in dev server.
            var culture = "en-US";
            var region = "USA";
            var mainTicker = "XNYS:IBM";
            var sw = 955, sh = 356;
            var statusConfig = {
                width: 600,
                height: 320
            };
            var uiconfig = {
                pCtrl1: null,
                pCtrl2: null,
                vCtrl: null,
                Chart: {
                    showPChart: true,
                    showVChart: true,
                    showLegend: true,
                    showTimeSlider: true
                },
                RightMenu: false,
                CustomUI: false,
                chartCtrl: "default",
                settingPanel: null,
                fairValue: true,
                autoHeight: true
            };
            GB_ChartDataManager.dataUrls.intraday = "../quote.jsp?";
            GB_ChartDataManager.dataUrls.historical = "../getStockHistoricalData.jsp?";
            GB_ChartDataManager.dataUrls.fundamental = "../getFundamentalData.jsp?";
            GB_ChartDataManager.dataUrls.minutelyIntraday = "../getMinutelyIntradayData.jsp?";
            GB_ChartDataManager.dataUrls.fundHistorical = "../getFundChartData.jsp?";
            
            var ch1 = new RTChartComponent(mainTicker, region, culture);
            ch1.initUIConfig(uiconfig); // user default ui configure.
            ch1.Init("chart", "ch1", statusConfig)
            //"1":{desc:"",meth:"",args:[{name:"",desc:""}],eg:""}
            //"1":{desc:"",meth:[{name:"",args:[{name:"",desc:""}]}],eg:""}
            var descArr = {
                "1": {
                    desc: "Change the type of chart",
                    meth: [{
                        name: "setChartType (type)",
                        args: [{
                            name: "type",
                            desc: "it is a string type.(lines: line chart, ohlc: OHLC chart, candle: candlestick chart)."
                        }]
                    }],
                    eg: "ch1.setChartType ('lines');ch1.setChartType ('ohlc');ch1.setChartType ('candle');"
                },
                "2": {
                    desc: "Change the type of scale",
                    meth: [{
                        name: "switchScaleType(type)",
                        args: [{
                            name: "type",
                            desc: "it is a integer.(0: Linear ,1: Logarithmic;)"
                        }]
                    }],
                    eg: "ch1.switchScaleType(0)<br/>ch1.switchScaleType(1)"
                },
                "3": {
                    desc: "Add compare tickers",
                    meth: [{
                        name: "addCompairTickers(tickers)",
                        args: [{
                            name: "tickers",
                            desc: "the unique symbol for a securities. Its format is concat exchange name and ticker name with a colon. (Such as: XNYS: IBM). It can input multi-tickers which spited by comma. (XNAS:MSFT,XNYS:IBM)"
                        }]
                    }, {
                        name: "removeCompairTicker (tickers)",
                        args: [{
                            name: "tickers",
                            desc: "the unique symbol for a securities. Its format is concat exchange name and ticker name with a colon. (Such as: XNYS: IBM)."
                        }]
                    }],
                    eg: "ch1.addCompairTickers(XYNS:IBM) <br/> ch1.addCompairTickers(XNAS:MSFT,XNYS:IBM)."
                },
                "4": {
                    desc: "Change the style of cursor.",
                    meth: [{
                        name: "setCursorType (type)",
                        args: [{
                            name: "type",
                            desc: "it is a integer.(0:Track ball ,1: Crosshair; 3: Off.)"
                        }]
                    }],
                    eg: "ch1.setCursorType (0);"
                },
                "5": {
                    desc: "Change the zoom type.",
                    meth: [{
                        name: "changeRange(type)",
                        args: [{
                            name: "type",
                            desc: "it is a integer.(1: one day;0:three days,2: five days,3: one month, 4: three months,5:YTD,6: one year, 7:three years, 8:five years, 9: ten years. 10: maximum."
                        }]
                    }],
                    eg: "ch1.changeRange(1)<br/>ch1.changeRange(2);"
                },
                "49": {
                    desc: "Change the selection mode",
                    meth: [{
                        name: "setSelectionMode(type)",
                        args: [{
                            name: "type",
                            desc: "'pan' or 'zoomin'"
                        }]
                    }],
                    eg: "ch1.setSelectionMode('pan');ch1.setSelectionMode('zoomin');"
                },
                "50": {
                    desc: "Reset the zoom in",
                    meth: [{
                        name: "resetZoom()",
                        args: []
                    }],
                    eg: "ch1.resetZoom();"
                },
                "6": {
                    desc: "Customize range of date.",
                    meth: [{
                        name: "changeDatePeriod (st,ed)",
                        args: [{
                            name: "st",
                            desc: "the start date .(its format is yyyy-MM-dd or yyyy-M-d )"
                        }, {
                            name: "et",
                            desc: "the end date .(its format is yyyy-MM-dd or yyyy-M-d )"
                        }]
                    }],
                    eg: "ch1.changeDatePeriod('2004-1-3','2009-11-9')."
                },
                "7": {
                    desc: "Change the type of data frequency.",
                    meth: [{
                        name: "setFrequency (type)",
                        args: [{
                            name: "type",
                            desc: " it is a string type.(minute: 1 minute, minute5: 5 minutes,10:10 minutes, minute15: 15 minutes, minute30:30 minutes,d: daily, w: weekly, m: monthly)."
                        }]
                    }],
                    eg: "ch1.setFrequency('d');<br/>ch1.setFrequency('w');<br/>ch1.setFrequency('m');"
                },
                "8": {
                    desc: "Switch the visibility of volume chart.",
                    meth: [{
                        name: "switchVolumeChart (isShow)",
                        args: [{
                            name: "isShow",
                            desc: "it is a integer.(1: show volume chart, 0: hide volume chart)."
                        }]
                    }],
                    eg: "ch1.switchVolumeChart (0);<br/>ch1.switchVolumeChart (1);"
                },
                "48": {
                    desc: "Switch the visibility of IIV Line.",
                    meth: [{
                        name: "switchIIV (isShow)",
                        args: [{
                            name: "isShow",
                            desc: "it is a integer.(1: show IIV line, 0: hide IIV line)."
                        }]
                    }],
                    eg: "ch1.switchIIV (1);<br/>ch1.switchIIV (0);"
                },
                "9": {
                    desc: "Switch the visibility of earning's icon in price chart.",
                    meth: [{
                        name: "switchEvents ('earnings',isShow)",
                        args: [{
                            name: "isShow",
                            desc: "it is a integer.(1: show earnings, 0: hide earnings).."
                        }]
                    }],
                    eg: "ch1.switchEvents ('earnings',0);"
                },
                "10": {
                    desc: "Switch the visibility of dividend's icon in price chart.",
                    meth: [{
                        name: "switchEvents ('dividend',isShow)",
                        args: [{
                            name: "isShow",
                            desc: "it is a integer.(1: show dividend, 0: hide dividend).."
                        }]
                    }],
                    eg: "ch1.switchEvents ('dividend',0);"
                },
                "11": {
                    desc: "Switch the visibility of splits' icon in price chart.",
                    meth: [{
                        name: "switchEvents ('splits',isShow)",
                        args: [{
                            name: "isShow",
                            desc: "it is a integer.(1: show splits, 0: hide splits).."
                        }]
                    }],
                    eg: "ch1.switchEvents ('splits',0);"
                },
                "12": {
                    desc: "Add price simple move average <br/>Remove price simple move average indicator",
                    meth: [{
                        name: "addIndicators ('SMA',Line1,Line2,Line3)",
                        args: [{
                            name: "line1",
                            desc: "the period of first line of SMA lines (int) ."
                        }, {
                            name: "line2",
                            desc: "the period of first line of SMA lines (int) ."
                        }, {
                            name: "line3",
                            desc: "the period of first line of SMA lines (int) ."
                        }]
                    }, {
                        name: "removeIndicators ('SMA',period)",
                        args: [{
                            name: "period",
                            desc: "the period of first line of  SMA lines (option)"
                        }]
                    }],
                    eg: "ch1.removeIndicators('EMA',50);<br/>ch1.removeIndicators('EMA',10);<br/>ch1.removeIndicators('EMA',20);ch1.removeIndicators('EMA',50);<br/>ch1.removeIndicators('EMA',10);<br/>ch1.removeIndicators('EMA',20);<br/>ch1.removeIndicators('EMA'); "
                },
                "13": {
                    desc: "Add volume simple move average indicator<br/>Remove volume simple move average indicator",
                    meth: [{
                        name: "addIndicators ('SMAV',Period)",
                        args: [{
                            name: "Period",
                            desc: "the period of SMAV line (int). "
                        }]
                    }, {
                        name: "removeIndicators ('SMAV')",
                        args: [{
                            name: "",
                            desc: "the period of SMAV line (int). "
                        }]
                    }],
                    eg: "ch1.addIndicators('SMAV',50);<br/>ch1.removeIndicators ('SMAV')"
                },
                
                "14": {
                    desc: "Add price exponential move average indicator(EMA)<br/>Remove price exponential move average indicator(EMA)",
                    meth: [{
                        name: "addIndicators ('EMA',Line1,Line2,Line3)",
                        args: [{
                            name: "Line1",
                            desc: "the period of first line of  EMA lines (int)."
                        }, {
                            name: "Line2",
                            desc: "the period of second  line of  EMA lines (int)."
                        }, {
                            name: "Line3",
                            desc: "the period of third line of  EMA lines (int)."
                        }]
                    }, {
                        name: "removeIndicators ('EMA',Period)",
                        args: [{
                            name: "Period",
                            desc: "the period of first line of EMA lines (option)"
                        }]
                    }],
                    eg: "ch1.addIndicators('EMA',50,10,20);<br/>ch1.addIndicators('EMA',50,null,20);<br/>ch1.addIndicators('EMA',null,10,null);<br/>ch1.removeIndicators('EMA',50);<br/>ch1.removeIndicators('EMA',10);<br/>ch1.removeIndicators('EMA',20);<br/>ch1.removeIndicators('EMA');  // remove all line of EMA"
                },
                "51": {
                    desc: "Add weighted move average indicator<br/>Remove weighted move average indicator",
                    meth: [{
                        name: "addIndicators ('WMA',Period)",
                        args: [{
                            name: "Period",
                            desc: "the period of WMA line (int). "
                        }]
                    }, {
                        name: "removeIndicators ('WMA')",
                        args: [{
                            name: "",
                            desc: "the period of SMAV line (int). "
                        }]
                    }],
                    eg: "ch1.addIndicators('WMA',15);<br/>ch1.removeIndicators ('WMA')"
                },
                "15": {
                    desc: "Add Bollinger Bands indicator<br/>Remove Bollinger Bands indicator",
                    meth: [{
                        name: "addIndicators ('BBands',Period,Dev)",
                        args: [{
                            name: "Period",
                            desc: "the period of the BBands.(int)"
                        }, {
                            name: "Dev",
                            desc: " the deviation of the BBands (int)"
                        }]
                    }, {
                        name: "removeIndicators ('BBands')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('BBands',14,2);<br/>ch1.removeIndicators('BBands');"
                },
                
                "16": {
                    desc: "Add Parabolic SAR indicator<br/>Remove Parabolic SAR indicator",
                    meth: [{
                        name: "addIndicators ('PSAR',parameter1, parameter2)",
                        args: [{
                            name: "parameter1",
                            desc: "the step of the PSAR. (float)"
                        }, {
                            name: "parameter2",
                            desc: "the max step of the PSAR. (float)"
                        }]
                    }, {
                        name: "removeIndicators ('PSAR')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('PSAR',0.02,0.1);<br/>ch1.removeIndicators('PSAR');"
                },
                "17": {
                    desc: "Add Moving Average Convergence/Divergence   indicator<br/>Remove Moving Average Convergence/Divergence   indicator",
                    meth: [{
                        name: "addIndicators ('MACD', parameter1, parameter2, parameter3)",
                        args: [{
                            name: "parameter1",
                            desc: "the slow period of the MACD (int)."
                        }, {
                            name: "parameter2",
                            desc: "the fast period of the MACD (int)."
                        }, {
                            name: "parameter3",
                            desc: "the signal period of the MACD (int)."
                        }]
                    }, {
                        name: "removeIndicators ('MACD')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('MACD',26,12,9);<br/>ch1.removeIndicators('MACD');"
                },
                "18": {
                    desc: "Add Rate Of Change  indicator<br/>Remove Rate Of Change  indicator",
                    meth: [{
                        name: "addIndicators ('ROC',Period)",
                        args: [{
                            name: "Period",
                            desc: "the period of ROC (int). "
                        }]
                    }, {
                        name: "removeIndicators ('ROC')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('ROC',12);<br/>ch1.removeIndicators('ROC');"
                },
                
                "19": {
                    desc: "Add Relative Strength Index   indicator<br/>Remove Relative Strength Index   indicator",
                    meth: [{
                        name: "addIndicators ('RSI',Period)",
                        args: [{
                            name: "Period",
                            desc: "the period of RSI (int). "
                        }]
                    }, {
                        name: "removeIndicators ('RSI')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('RSI',14);<br/>ch1.removeIndicators('RSI');"
                },
                
                
                "20": {
                    desc: "Add Williams %R  indicator<br/>Remove Williams %R  indicator",
                    meth: [{
                        name: "addIndicators ('WillR',Period)",
                        args: [{
                            name: "period",
                            desc: " the period of WillR (int). "
                        }]
                    }, {
                        name: "removeIndicators ('WillR')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('WillR',20);<br/>ch1.removeIndicators('WillR');"
                },
                "21": {
                    desc: "Add Slow Stochastic indicator<br/>Remove Slow Stochastic indicator",
                    meth: [{
                        name: "addIndicators ('SStochastic', paramter1, paramter2)",
                        args: [{
                            name: "paramter1",
                            desc: "the K% period of the SStochastic.(int)"
                        }, {
                            name: "paramter2",
                            desc: "the D% period of the SStochastic.(int)"
                        }]
                    }, {
                        name: "removeIndicators ('SStochastic')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('SStochastic',15,5);<br/>ch1.removeIndicators('SStochastic');"
                },
                "22": {
                    desc: "Add Fast Stochastic indicator<br/>Remove Fast Stochastic indicator",
                    meth: [{
                        name: "addIndicators ('FStochastic', paramter1, paramter2)",
                        args: [{
                            name: "paramter1",
                            desc: "the K% period of the FStochastic.(int)"
                        }, {
                            name: "paramter2",
                            desc: "the D% period of the FStochastic.(int)"
                        }]
                    }, {
                        name: "removeIndicators ('FStochastic')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('FStochastic',5,3);<br/>ch1.removeIndicators('FStochastic');"
                },
                
                "23": {
                    desc: "Add Price Channel indicator<br/>Remove Price Channel indicator",
                    meth: [{
                        name: "addIndicators ('PChannel',Period)",
                        args: [{
                            name: "Period",
                            desc: " the period of PChannel (int)."
                        }]
                    }, {
                        name: "removeIndicators ('PChannel')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('PChannel',14);<br/>ch1.removeIndicators('PChannel ');"
                },
                "24": {
                    desc: "Add MA Envelope indicator<br/>Remove MA Envelope indicator",
                    meth: [{
                        name: "addIndicators ('MAE',Period,BandWidth)",
                        args: [{
                            name: "Period",
                            desc: "the period of MAE (int)."
                        }, {
                            name: "BandWidth",
                            desc: "the width of band(int)"
                        }]
                    }, {
                        name: "removeIndicators ('MAE')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('MAE',14,2);<br/>ch1.removeIndicators('MAE ');"
                },
                "25": {
                    desc: "Add Momentum indicator<br/>Remove Momentum indicator",
                    meth: [{
                        name: "addIndicators ('Momentum',Period)",
                        args: [{
                            name: "Period",
                            desc: "the period of momentum (int)."
                        }]
                    }, {
                        name: "removeIndicators ('Momentum')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.the period of momentum (int).<br/>ch1.removeIndicators('Momentum ');"
                },
                "26": {
                    desc: "Add Ultimate (ULT) Oscillator indicator <br/>Remove Ultimate (ULT) Oscillator indicator ",
                    meth: [{
                        name: "addIndicators ('ULT')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('ULT')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators('ULT');<br/>ch1.removeIndicators ('ULT');"
                },
                
                "27": {
                    desc: "Add Directional Moving Index (DMI) indicator <br/>Remove Directional Moving Index (DMI) indicator ",
                    meth: [{
                        name: "addIndicators ('DMI')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('DMI')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators ('DMI');<br/>ch1.removeIndicators ('DMI');"
                },
                "28": {
                    desc: "Add Money Flow Index  indicator <br/>Remove Money Flow Index indicator ",
                    meth: [{
                        name: "addIndicators ('MFI',Period)",
                        args: [{
                            name: "period",
                            desc: "the period of MFI (int)."
                        }]
                    }, {
                        name: "removeIndicators ('MFI')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators ('MFI',14);<br/>ch1.removeIndicators ('MFI');"
                },
                "29": {
                    desc: "Add On Balance Volume indicator <br/>Remove On Balance Volume indicator ",
                    meth: [{
                        name: "addIndicators ('OBV')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('OBV')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators ('OBV');<br/>ch1.removeIndicators ('OBV');"
                },
                "30": {
                    desc: "Add Volume Accumulation   indicator<br/>Remove Volume Accumulation indicator ",
                    meth: [{
                        name: "addIndicators ('VAcc')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('VAcc')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators ('VAcc');<br/>ch1.removeIndicators ('VAcc');"
                },
                "31": {
                    desc: "Add Up/Down Ratio indicator <br/>Remove Up/Down Ratio indicator ",
                    meth: [{
                        name: "addIndicators ('UDRatio',Period,Soomthing)",
                        args: [{
                            name: "Period",
                            desc: "the period of UDRatio (int)."
                        }, {
                            name: "Soomthing",
                            desc: "the smoothing of UDRatio (int)"
                        }]
                    }, {
                        name: "removeIndicators ('UDRatio')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators ('UDRatio',7,5);<br/>ch1.removeIndicators ('UDRatio');"
                },
                "32": {
                    desc: "Add Volume By Price   indicator <br/>Remove Volume By Price   indicator ",
                    meth: [{
                        name: "addIndicators ('VBP')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('VBP')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators ('VBP');<br/>ch1.removeIndicators ('VBP');"
                },
                "33": {
                    desc: "Add Price/Earnings valuations chart.<br/>Remove Price/Earnings valuations chart.",
                    meth: [{
                        name: "addValuations('PE')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('PE')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addValuations('PE')<br/>ch1.removeValuations ('PE')"
                },
                "34": {
                    desc: "Add Price/Book valuations chart.<br/>Remove Price/Book valuations chart.",
                    meth: [{
                        name: "addValuations('PB')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('PB')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addValuations('PB')<br/>ch1.removeValuations ('PB')"
                },
                "35": {
                    desc: "Add Price/Sales valuations chart.<br/>Remove Price/Sales valuations chart.",
                    meth: [{
                        name: "addValuations('PS')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('PS')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addValuations('PS')<br/>ch1.removeValuations ('PS')"
                },
                "36": {
                    desc: "Add Price/Cash Flow valuations chart.<br/>Remove Price/Cash Flow valuations chart.",
                    meth: [{
                        name: "addValuations('PC')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('PC')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addValuations('PC')<br/>ch1.removeValuations ('PC')"
                },
                "37": {
                    desc: "Add Fair Value valuations chart.<br/>Remove Fair Value valuations chart.",
                    meth: [{
                        name: "addValuations('FairValue')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('FairValue')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addValuations('FairValue')<br/>ch1.removeValuations ('FairValue')"
                },
                "38": {
                    desc: "Add a trend line",
                    meth: [{
                        name: "beginDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }, {
                        name: "cancelDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }],
                    eg: "ch1.beginDrawing('trendline')<br/>ch1.cancelDrawing('trendline')"
                },
                "39": {
                    desc: "Add a rectangle",
                    meth: [{
                        name: "beginDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }, {
                        name: "cancelDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }],
                    eg: "ch1.beginDrawing('rectangle')<br/>ch1.cancelDrawing('rectangle')"
                },
                "40": {
                    desc: "Add a ellipse",
                    meth: [{
                        name: "beginDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }, {
                        name: "cancelDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }],
                    eg: "ch1.beginDrawing('ellipse')<br/>ch1.cancelDrawing('ellipse')"
                },
                "40": {
                    desc: "Add a ellipse",
                    meth: [{
                        name: "beginDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }, {
                        name: "cancelDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }],
                    eg: "ch1.beginDrawing('ellipse')<br/>ch1.cancelDrawing('ellipse')"
                },
                "52": {
                    desc: "Add a level line",
                    meth: [{
                        name: "beginDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }, {
                        name: "cancelDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }],
                    eg: "ch1.beginDrawing('levelline')<br/>ch1.cancelDrawing('levelline')"
                },
                "53": {
                    desc: "Add a fibonacci retracement levels",
                    meth: [{
                        name: "beginDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }, {
                        name: "cancelDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }],
                    eg: "ch1.beginDrawing('fibonacci')<br/>ch1.cancelDrawing('fibonacci')"
                },
                "41": {
                    desc: "Add a note",
                    meth: [{
                        name: "beginDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }, {
                        name: "cancelDrawing(type)",
                        args: [{
                            name: "type",
                            desc: "the type of drawing"
                        }]
                    }],
                    eg: "ch1.beginDrawing('note')<br/>ch1.cancelDrawing('note')"
                },
                "42": {
                    desc: "Add Volume plus indicator <br/>Remove Volume plus indicator ",
                    meth: [{
                        name: "addIndicators ('VPlus')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('VPlus')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators ('VPlus');<br/>ch1.removeIndicators ('VPlus');"
                },
                "43": {
                    desc: "Add Volume<br/>Remove Volume",
                    meth: [{
                        name: "addIndicators ('Volume')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('Volume')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addIndicators ('Volume');<br/>ch1.removeIndicators ('Volume');"
                },
                "44": {
                    desc: "Add RDividend valuations chart.<br/>Remove RDividend valuations chart.",
                    meth: [{
                        name: "addValuations('RDividend')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('RDividend')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addValuations('RDividend')<br/>ch1.removeValuations ('RDividend')"
                },
                "45": {
                    desc: "Add DYield valuations chart.<br/>Remove DYield valuations chart.",
                    meth: [{
                        name: "addValuations('DYield')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('DYield')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addValuations('DYield')<br/>ch1.removeValuations ('DYield')"
                },
                "46": {
                    desc: "Add REPS valuations chart.<br/>Remove REPS valuations chart.",
                    meth: [{
                        name: "addValuations('REPS')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('REPS')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addValuations('REPS')<br/>ch1.removeValuations ('REPS')"
                },
                "47": {
                    desc: "Add SInterest valuations chart.<br/>Remove SInterest valuations chart.",
                    meth: [{
                        name: "addValuations('SInterest')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }, {
                        name: "removeIndicators ('SInterest')",
                        args: [{
                            name: "",
                            desc: ""
                        }]
                    }],
                    eg: "ch1.addValuations('SInterest')<br/>ch1.removeValuations ('SInterest')"
                }
            
            }
            //"1":{desc:"",meth:[{name:"",args:[{name:"",desc:""}]}],eg:""}
            window.onload = function(){
                var s1 = "", s2 = "", temp = null;
                for (var s in descArr) {
                    temp = descArr[s];
                    s2 = "";
                    for (var j = 0; j < temp.meth.length; j++) {
                        s2 += temp.meth[j].name;
                        for (var i = 0; i < temp.meth[j].args.length; i++) {
                            if (temp.meth[j].args[i].name == null || temp.meth[j].args[i].name == "") {
                                s2 += "<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Not need more parameter.";
                                continue;
                            }
                            s2 += "<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>" + temp.meth[j].args[i].name + "</u>: " + temp.meth[j].args[i].desc;
                        }
                        if (j < temp.meth.length - 1) {
                            s2 += "<br/>";
                        }
                    }
                    s1 += "<div id='d-" + s + "' class='handle'><div class='title title0'>Description</div>" + descArr[s].desc + "<div  class='title'>Methods</div>" + s2 + "<div  class='title'>Example</div>" + descArr[s].eg + "</div>";
                }
                $("#desc").append(s1);
                $(".handle").hide();
                $("ul.ctrl li").not(".li-title").hover(function(){
                    //$(this).addClass("ullihover");
                }, function(){
                    //$(this).removeClass("ullihover");
                }).click(function(){
                    $(".handle").hide();
                    $("ul.ctrl li").removeClass("ullihover");
                    $(this).addClass("ullihover");
                    $("#d-" + $(this).attr("idx")).show();
                });
                
            }
            function addCompairTicker(){
                if (ch1 != null) {
                    var ticker = document.getElementById("compairTxt").value;
                    if (ticker != "") {
                        ch1.addCompairTickers(ticker);
                    }
                }
            }
            
            function removeCompairTicker(){
                if (ch1 != null) {
                    var ticker = document.getElementById("select-compair").value;
                    if (ticker != "") {
                        ch1.removeCompairTicker(ticker);
                    }
                }
            }
            
            function changeZoomType(){
                if (ch1 != null) {
                    var num = document.getElementById("zoomType").options[document.getElementById("zoomType").selectedIndex].value;
                    if (num != "-1") {
                        ch1.changeRange(num);
                    }
                }
            }
            
            function changeDateRange(){
                if (ch1 != null) {
                    var st = document.getElementById("startBox").value;
                    var ed = document.getElementById("endBox").value;
                    if (st != "" && ed != "") {
                        ch1.changeDatePeriod(st, ed);
                    }
                }
            }
            
            function setCursorType(){
                if (ch1 != null) {
                    var st = parseInt(document.getElementById("csType").value);
                    if (!isNaN(st) && st > -1 && st < 4) {
                        ch1.setCursorType(st);
                    }
                }
            }
            
            function setFrequency(){
                if (ch1 != null) {
                    var st = document.getElementById("fre").value;
                    ch1.setFrequency(st);
                }
            }
            
            function switchVolumeChart(){
                if (ch1 != null) {
                    var st = parseInt(document.getElementById("switchVol").value);
                    if (!isNaN(st) && (st == 0 || st == 1)) {
                        ch1.switchVolumeChart(st);
                    }
                }
            }
            
            function switchIIV(){
                if (ch1 != null) {
                    var st = parseInt(document.getElementById("switchIIV").value);
                    if ((st == 0 || st == 1)) {
                        ch1.switchIIV(st);
                    }
                }
            }
            
            function setChartType(){
                if (ch1 != null) {
                    var st = document.getElementById("chartType").value;
                    //if(st == "lines" || st == "ohlc" || st == "candle") {
                    ch1.setChartType(st);
                    // }
                }
            }
            
            function switchDividend(){
                if (ch1 != null) {
                    var st = parseInt(document.getElementById("dividend").value);
                    if (st == 0 || st == 1) {
                        ch1.switchEvents("dividend", st);
                    }
                }
            }
            
            function switchSplits(){
                if (ch1 != null) {
                    var st = parseInt(document.getElementById("splits").value);
                    if (st == 0 || st == 1) {
                        ch1.switchEvents("splits", st);
                    }
                }
            }
            
            function switchEarnings(){
                if (ch1 != null) {
                    var st = parseInt(document.getElementById("earnings").value);
                    if (st == 0 || st == 1) {
                        ch1.switchEvents("earnings", st);
                    }
                }
            }
            
            function setVerticalScale(){
                var ty = document.getElementById("chartScale").value;
                ch1.switchScaleType(ty);
            }
            
            function setSelectionMode(){
                var ty = document.getElementById("setSelectionMode").value;
                ch1.setSelectionMode(ty);
            }
            
            function resetZoom(){
                ch1.resetZoom();
            }
        </script>
    </body>
</html>
